import React from "react";
// 引入 react-router
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// 引入组件
import Index from "./Pages/Index";
import Detail from "./Pages/Detail";
import List from "./Pages/List";
import Home from "./Pages/Home";

// function Index() {
//   return <h2>Alomy</h2>;
// }
// function List() {
//   return <h2>列表</h2>;
// }

function AppRouter() {
  return (
    <Router>
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/detail/123">详情</Link>
        </li>
        <li>
          <Link to="/list">列表</Link>
        </li>
      </ul>
      {/* exact => 精确匹配 */}
      <Route path="/" exact component={Index} />
      {/* 
        动态传参 :id 
        如果不传任何东西，则无法匹配路由成功
      */}
      <Route path="/detail/:id" component={Detail} />
      <Route path="/list/" component={List} />
      <Route path="/home/" component={Home} />
    </Router>
  );
}

export default AppRouter;
